<template>
	<view class="bg">
		<view class="timeline" v-if="logList">
			<timeline>
				<timeline-item v-for="item in logList" :leftTime="item.date" :color="color">
					<view class="tips">{{item.content}}</view>
				</timeline-item>
			</timeline>
		</view>
		<view class="imgLine" v-if="!logList">
			<img src='../../static/img/none.png' class="img-none"/>
			<view class="text">暂无日志</view>
		</view>
	</view>
</template>

<script>
	import timeline from '../../components/chenbin-timeline/timeLine.vue'
	import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
	export default {
		components:{
			timeline,
			timelineItem
		},
		data() {
			return {
				cardId: '',
				logList: [],
				page: {
					size: 10,
					current: 1
				},
				showLoadMore: false,
				color: 'linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%)',
			}
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.logList = []
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.data = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.cardId = option.cardId
			this.initData();
		},
		methods: {
			initData() {
				this.$req.userData('/card-log/cardLogPageList', {
					cardId: this.cardId,
					page: this.page
				}).then(v => {
					if (v.data.records.length != 0) {
						v.data.records.map(t => {
							let obj = {}
							obj.title = t.title
							obj.content = t.remark
							obj.date = t.insertTimeDate
							this.logList.push(obj)
						})
						
					} 
				})
			
			}
			
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ffffff 100%);
	}
	.timeline{
		width: 90%;
		height: 90%;
		position: absolute;
		top: 0;
		left: 0;
		padding: 5%;
		overflow-y: scroll;
	}
	.tips{
		width: 90%;
		height: auto;
		border-radius: 5px;
		position: relative;
		padding: 10px;
		font-size: 28upx;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		color: #ffffff;
	}
	.tripItem {
		height:140rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
		border-radius:10px;
		margin-bottom: 30rpx;
	}
	.imgLine{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #ffffff;
	}
	.img-none{
		width: 50%;
		height: auto;
	}
	.text{
		width: auto;
		height: 50upx;
		font-size: 28upx;
		color: #999;
	}
</style>
